import * as Matter from 'matter-js';
import * as PIXI from "pixi.js";
import { App } from '../system/App';
import { Diamond } from "@/components/pages/game/ball/comp/game/Diamond";
// [10]

// [/10]

export class BasketRimRight {
  constructor(x, y) {
    this.width = App.config.basket.rim.width;
    this.height = App.config.basket.rim.height;
    this.board = App.config.basket.board;
    this.ball = App.config.ball;
    this.r = App.config.basket.rim.r;
    this.dx = 5;

    this.createContainer(x);
    this.createSprite(x, y);
    this.createDiamond(x, y);

    this.options = {
      isStatic: true,
      friction: 0,
      render: {
        fillStyle: 'blue',
        strokeStyle: 'black'
      }
    }
  }

  createDiamond(x, y) {
    const diamond = new Diamond(x, y);
    this.container.addChild(diamond.sprite);
    diamond.createBody();
  }

  createContainer(x) {
    this.container = new PIXI.Container();
    this.container.x = x;
    this.container.y = window.innerHeight - this.height;
  }

  createBody() {
    this.rim_left = Matter.Bodies.circle(
      this.sprite.parent.x - this.r,
      this.sprite.parent.y + this.board.height - this.r * 2,
      this.r,
      {
        isStatic: true,
        render: {
          fillStyle: 'orange',
        }
      }
    );

    // this.rim_center = Matter.Bodies.circle(
    //   (this.sprite.parent.x + this.width) / 2 + this.r * 2,
    //   this.sprite.parent.y + this.board.height - this.r * 2,
    //   this.r,
    //   {
    //     isStatic: true,
    //     render: {
    //       fillStyle: 'green',
    //       strokeStyle: 'black'
    //     }
    //   }
    // );


    this.rim_right = Matter.Bodies.circle(
      this.sprite.parent.x + this.width - this.r * 2,
      this.sprite.parent.y + this.board.height - this.r * 2,
      this.r,
      this.options
    );
    Matter.World.add(App.physics.world, [this.rim_right, this.rim_left]);
    // this.rim_center.rim = this;
  }


  createSprite(x, y) {
    this.sprite = App.sprite(`basket_rim_right`);
    this.sprite.x = this.r;
    this.sprite.y = y - this.r * 3;
    this.sprite.width = this.width;
    this.sprite.height = this.height;
    this.sprite.name = `basket_rim`;
  }

  move(dx, y) {
    if (dx > 0) {
      if (
        this.rim_left &&
        this.rim_left.position.x < window.innerWidth + App.config.basket.board.width + this.r
      ) {
        Matter.Body.setPosition(this.rim_left, {x: this.rim_left.position.x + dx, y: y - this.r || this.rim_left.position.y});
      }

      if (
        this.rim_right &&
        this.rim_right.position.x < window.innerWidth + App.config.basket.board.width
      ) {
        Matter.Body.setPosition(this.rim_right, {x: this.rim_right.position.x + dx, y: y - this.r || this.rim_right.position.y});
      }
    } else {
      if (
        this.rim_left &&
        this.rim_left.position.x > window.innerWidth - App.config.basket.rim.width - this.r
      ) {
        Matter.Body.setPosition(this.rim_left, {x: this.rim_left.position.x + dx, y: y - this.r || this.rim_left.position.y});
      }

      if (
        this.rim_right &&
        this.rim_left.position.x > window.innerWidth - App.config.basket.board.width - this.r
      ) {
        Matter.Body.setPosition(this.rim_right, {x: this.rim_right.position.x + dx, y: y - this.r || this.rim_right.position.y});
      }
    }

  }


  // 06


}